<template>
    <div class="tm-box">
        <el-tree :data="props.dataArray" :props="treeProps" @node-click="handleNodeClick" :node-key="null">
            <template v-slot="{ node }">
                <div class="tm-ul">
                    <!-- <i class="custom-icon" :class="{'el-icon-folder': !node.data.children, 'el-icon-folder-open': node.expanded }"></i> -->
                    <div v-show="node.data.id != null">
                        <el-button class="tm-name" style="text-align: left;"> {{ node.label }}</el-button>
                        <el-button class="tm-property" color="#2CA6E0" @click="propertySet(node.data)"
                            @click.stop.prevent>菜单属性</el-button>
                        <el-button class="tm-jurisdiction" color="#FABD68" @click="roleSet(node.data)"
                            @click.stop.prevent>权限编辑</el-button>
                        <el-popconfirm title="确认删除" @confirm="deleteMenu(node.data.id)">
                            <template #reference>
                                <el-button @click.stop.prevent>删除</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                    <el-button @click="addend(node.data)" class="tm-add" @click.stop.prevent
                        v-show="node.data.id == null" color="#2CA6E0">+</el-button>
                </div>
            </template>
        </el-tree>


    </div>
</template>
  
<script setup>
import { ref, onMounted } from 'vue';

import { defineProps, defineEmits } from 'vue';

// const props = defineProps(['emit']);
const emits = defineEmits();
// const dataArray = defineEmits();
const props = defineProps({
    dataArray: Array
});

const treeData = ref();
onMounted(() => {
    // addNewNull();
    console.log(props.dataArray);
    //console.log( '初始化组件');
    console.log( treeData.value);
});





//删除
function deleteMenu(id){
    emits('deleteMenu', id);
}


const treeProps = {
    label: 'label',
    children: 'children',
};

const handleNodeClick = (nodeData) => {
    // Handle node click, e.g., open a modal for adding/deleting
   // console.log('Node clicked:', nodeData);
};

//子集传值给父级
//新增
function addend(data) {
    //console.log(data);
    emits('addend', data);
}
//修改
function propertySet(data){
    //console.log(data);
    emits('propertySet',data)
}

function roleSet(data){
    emits('roleSet',data)

    
}



</script>


<style lang="scss">
.tm-box {
    // min-height: 100px;
    z-index: 999;

    // .tm-ul {
    //     // margin-top:20px;
    //     // height:100px;
    //     // min-height: 100px;
    //     // background: red;
    // }

    .tm-name {
    width: 200px;
    span{
        text-align: left;
    }
}

.tm-property {
    color: white;
}

.tm-jurisdiction {
    color: white;
}


.el-tree-node__content {
    height: auto !important;
    margin-top: 15px;
    // margin-bottom:20px;
}

.tm-add {
    width: 200px;
    color: white;


}

.tm-bottom {
    margin-bottom: 20px;
}

// .el-tree-node .el-tree-node:last-child {
//     // margin-top: 12px;
//     // min-height: 50px;
//     // background-color: red;
// }

// .tm-no1 {
//     // margin-top:20px;
// }

}


</style>
  